<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=dege"/>
    <meta name="format-detection" content="telephone=no" />
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/animate.min.css"/>
    <link href="images/favicon.ico" rel="icon" type="images/x-icon">
    <link rel="stylesheet" href="css/second.css">
    <link rel="stylesheet" href="css/headfoot.css"/>
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper-3.4.2.min.js"></script>
    <script src="js/second.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nxW0akynjKF8Ag0G0uVVwq0t6ak1Q1Zj"></script>
</head>
<body>
<!--头部部分-->
<div class="heads">
    <script>
        $(".heads").load("head.html");
    </script>
</div>
<!--banner-->
<div class="fu_bg xuebg">
    <div class="fu_inner inner wow bounceIn animated">
        <div class="fu_text">
            <div class="fu_pos">
                <b></b>
                <h1 class="col_00">学员风采</h1>
                <p class="col_00"> STUDENT</p>
            </div>

        </div>
    </div>
</div>
<!--课程列表-->
<div class="padd50 system">
    <div class="title">
        <h1>
            <div style="animation-delay: 0s;">学</div>
            <div style="animation-delay: 0.1s;">员</div>
            <div style="animation-delay: 0.2s;">风</div>
            <div style="animation-delay: 0.3s;">采</div>
            <br/> <b></b> </h1>
    </div>
   <div class="main-md">
       <div id="container" class="container-fluid">
           <div class="item"><img src="images/second/yan-1.jpg" alt="" data="好美1"/></div>
           <div class="item w2">  <img src="images/second/yan-2.jpg" alt="" data="好美2"/></div>
           <div class="item">  <img src="images/second/yan-3.jpg" alt="" data="好美3"/></div>
           <div class="item w2">  <img src="images/second/yan-4.jpg" alt="" data="好美4"/></div>
           <div class="item">  <img src="images/second/yan-5.jpg" alt="" data="好美5"/></div>
           <div class="item w2">  <img src="images/second/yan-6.jpg" alt="" data="好美6"/></div>
           <div class="item">  <img src="images/second/yan-7.jpg" alt="" data="好美7"/></div>
           <div class="item w2">  <img src="images/second/yan-8.jpg" alt="" data="好美8"/></div>
           <div class="item">  <img src="images/second/yan-9.jpg" alt="" data="好美9"/></div>
       </div>
   </div>
</div>
<div class="bounce" id="bounce">
    <div class="bounce-cont">
        <div class="radio">
            <div class="radio_cont poto">
                <i class="iconfont icon-guanbi closes"></i>
                <img src="" alt=""/>
                <!--<h5></h5>-->
            </div>

        </div>
    </div>
</div>
<!--页尾-->
<div class="foots">
    <script>
        $(".foots").load("foot.html");
    </script>
</div>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.masonry.js"></script>
<script src="js/jquery.infinitescroll.js"></script>
<script>
    $(function(){
        $(".container-fluid").on('click','.item img', function () {
            $(".bounce").show();
            var a=$(this).attr("src");
            var data=$(this).attr("data");
            $(".poto img").attr("src",a);
//            $(".poto h5").html(data);
        });
        $('.closes').click(function () {
            $('.bounce').hide();
        });
    });
    var $container = $('#container');
    function item_masonry(){
        $container.imagesLoaded(function() {
            $container.masonry({
                columnWidth: 20,
                isFitWidth: true,  // 自适应浏览器宽度
                itemSelector: '.item',
//            isAnimated: true
            });
        });
        $container.masonry({
            columnWidth: 20,
            isFitWidth: true,  // 自适应浏览器宽度
            itemSelector: '.item',
            // isAnimated: true
        });
    }

    item_masonry();
</script>
</body>
</html>